<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    class="dialogStyleMiddle"
    :visible.sync="dialogVisible"
  >
    <el-row>
      <el-form ref="form" :model="formData" label-width="80px">
        <el-col :span="rummagerList.length >= 3 ? 24 : 12">
          <el-form-item label="巡检人员" prop="rummager">
            <el-input v-model="formData.rummager" readonly placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现场人员" prop="worker">
            <el-input v-model="formData.worker" readonly placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现场设备" prop="equipment">
            <el-input v-model="formData.equipment" readonly placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="areaList">
            <el-cascader
              :value="formData.areaList"
              size="medium"
              readonly
              placeholder=""
              :options="cityOptions"
              style="width: 100%"
            >
              <template slot-scope="{ data }">
                <span>{{ data.label }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详情地址" prop="location">
            <el-input v-model="formData.location" readonly placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item readonly label prop="verdict">
            <label slot="label" v-html="`结&emsp;&emsp;论`" />
            <el-select
              :value="formData.verdict"
              style="width:100%"
              readonly
              size="medium"
              placeholder=""
            >
              <el-option
                v-for="item in verdictOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label prop="course">
            <label slot="label" v-html="`过&emsp;&emsp;程`" />
            <el-input v-model="formData.course" readonly :rows="3" :maxlength="500" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="影像资料" prop="appFiles">
            <previewImg :img-id-list="inspectionList" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { listByTreeProcessType } from '@/api/common/area.js'
// 页面组件- 附件上传
import previewImg from '@/components/basicinfo/previewImg'
import { getRecordById } from '@/api/projectInspection/inspectionRecord'
export default {
  name: 'DetailDialog',
  components: {
    previewImg
  },
  data() {
    return {
      cityOptions: [],
      inspectionList: [],
      // 结论数组
      verdictOptions: [
        { value: '0', label: '优秀' },
        { value: '1', label: '良好' },
        { value: '2', label: '较差' }
      ],
      /* 表单 start */
      dialogVisible: false, // 弹框显隐
      dialogTitle: '', // 弹框标题
      inputVisible: false,
      tagValue: '',
      rummagerList: [],
      formData: {
        id: '',
        equipment: '', // 现场设备
        nation: '', // 国家
        region: '', // 地区
        areaList: [],
        province: '', // 省
        city: '', // 市
        county: '', // 县
        verdict: '', // 结论
        course: '', // 过程
        rummager: '', // 巡检人员
        worker: '', // 现场人员
        location: '' // 详细地址
      }
    }
  },
  mounted() {
    this.getRegionTree()
  },
  methods: {
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyForm()
      if (id) {
        this.getDetailById(id)
      }
    },
    // 获取区域树
    async getRegionTree() {
      const { data: { rows }} = await listByTreeProcessType({ regionCode: '' })
      this.cityOptions = this.deleteChildren(rows)
    },
    async getDetailById(id) {
      const { data } = await getRecordById(id)
      this.formData = { ...this.formData, ...data }
      const { rummager, worker, equipment, nation, region, province, city, county, appFiles } = data
      this.formData.areaList = [nation, region, province, city, county]
      this.rummagerList = rummager.split(',')
      this.workerList = worker.split(',')
      this.equipmentList = equipment.split(',')
      this.inspectionList = appFiles.map(item => item.fileId)
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.emptyForm()
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
    }
  }
}
</script>

<style lang='scss' scoped>
.rummager {
  min-width: 302px;
  padding: 0 15px;
  height: 36px;
  border: 1px solid #dcdfe6;
  color: #606266;
  line-height: 34px;
  border-radius: 4px;
  position: relative;
}
.tagInput {
  width: 80px;
}
.tag-item {
  margin-right: 5px;
}
.add-btn {
  vertical-align: middle;
  width: 66px;
  font-size: 12px;
  border-left: 1px solid #dcdfe6;
  display: inline-block;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  position: absolute;
  right: 0;
}
</style>
